<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">我的简历</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<form @submit="submitForm" class="submitForm">
				<view class="input_list">
					<view class="name">姓名</view>
					<input type="text" name="title" class="text_left" :value="title"  @input="formTitle" placeholder-class="phcolor" placeholder="请填写本人姓名"/>
				</view>
				<view class="input_list">
					<view class="name">性别</view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
				<view class="input_list">
					<view class="name">年龄</view>
					<input type="number" name="oldAge" class="text_left" :value="oldAge"  @input="formOldAge" placeholder-class="phcolor" style="padding-right: 120rpx;" placeholder="请填写年龄"/>
					<view class="company">岁</view>
				</view>
				<view class="input_list">
					<view class="name">身高</view>
					<input type="text" name="height" class="text_left" :value="height"  @input="formHeight" placeholder-class="phcolor" style="padding-right: 120rpx;" placeholder="请填写身高"/>
					<view class="company">cm</view>
				</view>
				<view class="idcard_list">
					<view class="name">有无健康证<switch :checked="switchChecked" color="#E85426"  @change="switchChange"/></view>
					<view class="idcard_box" :style="health==1?'display:block;':'display:none;'">
						<view class="up_box">
							<!-- input仅用于表单验证 -->
							<input name="jiankang" hidden="true" :value="jiankang"/>
							<view class='uploader_list' :style="jiankangZhanshi==null?'display:none;':'display:block;'">
								<image :src='jiankangZhanshi' class="idImg" mode="aspectFit" @tap='previewImg'/>
								<view class="delete"  @tap='deleteImg'>删除</view>
							</view>
							<view class="chooseImg"  @tap='chooseImg' :style="jiankangZhanshi==null?'display:block;':'display:none;'"><image :src="URL+'/JD_wx_img/add_pic.png'" mode="widthFix"></image>上传健康证</view>
						</view>
					</view>
				</view>
				<view class="input_list textarea_list">
					<view class="name">疾病史</view>
					<view class="textarea_box">
						<textarea class="detailText" name="bingshi" :value="bingshi"  @input="formBingshi" placeholder="请填写您的疾病史"></textarea>
					</view>	
				</view>
				<view class="input_list textarea_list">
					<view class="name">自我介绍</view>
					<view class="textarea_box">
						<textarea class="detailText" name="introduce" :value="introduce"  @input="formIntroduce" placeholder="选填，例如，我的优势，我的工作经历等"></textarea>
					</view>
				</view>
				<button type="primary" form-type="submit" class="public_btn public_btn03">保存简历</button>
			</form>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import WxValidate from '@/WxValidate.js';
	export default {
		data() {
			return {
				//域名拼接
				URL: app.globalData.URL,
				touHeight: 0,
				jiankang: '',
				array: ['请选择','男', '女'],//性别数据
				index: 0,//性别默认显示男
				gender: 1,//性别默认选择男				
				title: '',//姓名
				oldAge: '',//年龄
				height: '',//身高
				health: 2,//健康证：1=有,2=无
				switchChecked:false,//有无健康证状态
				jiankang: '',//健康证照片
				jiankangZhanshi:'',//健康证展示
				bingshi: '',//病史
				introduce: '',//自我介绍
			}
		},
		
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			//表单验证
			that.initValidate()
			
			//编辑过的认证信息
			uni.request({
				url: app.globalData.URL + '/api/v1/User/resume',
				method: "get",
				header:{
					token: uni.getStorageSync('token')
				},
				success: function (res){
					if(res.data.code==1){
						that.title = res.data.data.username//默认姓名
						that.gender = res.data.data.gender//性别:1=男,2=女,3=请选择
						that.oldAge = res.data.data.age//年龄
						that.height = res.data.data.stature//身高
						that.health = res.data.data.health//健康证：1=有,2=无
						that.jiankang = res.data.data.health_image//健康证照片
						that.jiankangZhanshi = res.data.data.health_image_//健康证照片原始数据
						that.bingshi = res.data.data.disease//病史
						that.introduce = res.data.data.introduce//自我介绍
						//判断有没有健康证：1=有,2=无
						if(that.health==1){
							that.switchChecked = true;
						}else{
							that.switchChecked = false;
						}
						//判断男女:1=男,2=女,3=请选择
						that.index = that.gender
					}
				}
			})
		},
		methods: {
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			initValidate() {
				var that = this;
				// 验证字段的规则
				const rules = {
					title:{
						required: true,
					},
					oldAge:{
						required: true,
						minlength: 2,
						maxlength: 3
					},
					height:{
						required: true,
						minlength: 2,
						maxlength: 3
					},
					bingshi:{
						required: true,
					},
				}
				// 验证字段的提示信息，若不传则调用默认的信息
				const messages = {
					title:{
						required: '请填写真实姓名',
					},
					oldAge:{
						required: '请填写年龄',
						minlength: '年龄2-3位数之间',
						maxlength: '年龄2-3位数之间'
					},
					height:{
						required: '请填写身高',
						minlength: '年龄2-3位数之间',
						maxlength: '年龄2-3位数之间'
					},
					bingshi:{
						required: '请填写疾病史',
					},
				}
				// 创建实例对象
				that.WxValidate = new WxValidate(rules, messages)
			},
			
			//表单验证
			showModal(error) {
				uni.showModal({
					content: error.msg,
					showCancel: false,
				})
			},
			
			//姓名实时监控
			formTitle:function(e){
				var that = this;
				that.title = e.detail.value;
			},
			
			//年龄实时监控
			formOldAge:function(e){
				var that = this;
				that.oldAge = e.detail.value;
			},
			
			//身高实时监控
			formHeight:function(e){
				var that = this;
				that.height = e.detail.value;
			},
			
			//病例史实时监控
			formBingshi:function(e){
				var that = this;
				that.bingshi = e.detail.value;
			},
			
			//自我介绍实时监控
			formIntroduce:function(e){
				var that = this;
				that.introduce = e.detail.value;
			},
			
			//有无健康证
			switchChange: function(e){
				var that = this;
				console.log(e.target.value)
				if(e.target.value==true){
					that.health = 1;
				}else{
					that.health = 2;
				}
			},
			
			//选择性别
			bindPickerChange: function(e){
				var that = this;
				that.index = Number(e.target.value);
				switch (that.index){
					case 0:
						that.gender = 3;
					break;
					case 1:
						that.gender = 1;
					break;
					case 2:
						that.gender = 2;
					break;
				}
			},
			
			//简历表单提交
			submitForm(e) {
				var that = this;
				const params = e.detail.value;
				// 传入表单数据，调用验证方法
				if (!that.WxValidate.checkForm(params)){
					const error = that.WxValidate.errorList[0]
					that.showModal(error)
					return false
				}
				uni.request({
					url: app.globalData.URL + '/api/v1/User/resume',
					method: "post",
					header:{
						"Content-Type":"application/x-www-form-urlencoded",
						token: uni.getStorageSync('token')
					},
					data:{
						username: that.title,//姓名
						gender: that.gender,//性别:1=男,2=女,3=请选择
						age: that.oldAge,//年龄
						stature: that.height,//身高
						health: that.health,//健康证：1=有,2=无
						health_image: that.jiankang,//健康照片：在【health】字段为1的时候该字段必填
						disease:that.bingshi ,//病史：长度不超过255字符
						introduce:that.introduce,//自我介绍：长度不超过255字符
					},
					success: function (res) {
						if(res.data.code==0){
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426',
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '编辑简历成功',
								showCancel: false,
								confirmColor:'#E85426',
								success(res){
									uni.setStorageSync('resume','1')
									uni.setStorageSync('gender',that.gender)
									uni.setStorageSync('age',that.oldAge)
									uni.navigateBack({
									    delta: 1
									})
								}
							})
						}
					}
				})
			},

			//上传健康证
			chooseImg: function(e){
			    var that = this;
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function (res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.URL + '/api/v1/File/upload', //仅为示例，非真实的接口地址
							header:{
								"Content-Type": "multipart/form-data",
								token: uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success (res){
								var list = JSON.parse(res.data)
								that.jiankang = list.data.url
								that.jiankangZhanshi = tempFilePaths
							}
						})
					},
				});
			},
			
			// 删除图片
			deleteImg: function(e){
				var that = this;
				that.jiankang = '';
				that.jiankangZhanshi = null;
			},
			
			// 预览图片
			previewImg: function(e){
				var that = this;
				var jiankangZhanshi = that.jiankangZhanshi;
				uni.previewImage({
					//所有图片
					urls: jiankangZhanshi
				})
			},//end
		}
	}
</script>

<style>
	.page_content{
		padding: 0px;
	}
	.submitForm .input_list{
		margin-top: 0px;
	}
	.submitForm .input_list input{
		text-align: right!important;
	}
	.submitForm .input_list.textarea_list{
		height: auto;
		line-height: normal;
		padding: 30rpx;
	}
	.submitForm .input_list .textarea_box{
		padding-left: 210rpx;
		height: 200rpx;
	}
	.submitForm .input_list .textarea_box textarea{
		width: 100%;
		height: 100%;
		font-size: 34rpx;
		color: rgba(0, 0, 0, 0.9);
	}
	.submitForm .input_list.textarea_list .name{
		box-sizing: border-box;
		padding-top: 30rpx;
	}
	.idcard_list .idcard_box{
		border-bottom: 2rpx solid #eee;
	}
	.submitForm .input_list .company{
		position: absolute;
		right: 20px;
		top: 0px;
		height: 100%;
		color: #E85426;
		font-size: 34rpx;
	}
</style>
